<template>
  <!-- 电子报支付 -->
  <view>
	<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
	<view class="header" v-show="showview"></view>
	<view style="width: 100%;height: 120upx;"></view>
    <view
      v-for="(item,index) in dataList"
      :key="index"
      class="d-flex single-pdf-edition border-bottom a-center"
	  v-show="showview"
    >
	
      <view class="zoom-img" style="height:100%;">
		<!-- 获取新闻列表数据 -->
		<v-html  :onload="_putNewsList(item.description)"></v-html>
        <image
          :src="item.cover"
          style="width: 276upx;height: 420upx;border-top:4upx solid #1e8de1;border-bottom:4upx solid #1e8de1;border-left:1upx solid #f4f4f4;border-right: 1upx solid #f4f4f4;"
          @click="_box_if($event)" :data-res="item.description" :data-bmimg="item.cover" :data-datetime="item.dzbReleaseDate" :data-title="item.title"></image>
		 <view class="d-flex">
		   <view
		     class="custom-btn"
		     style="background-color: #1e8de1;margin-top: -69upx;margin-left:132upx;z-index: 99;"
		     @tap="loadElectronicVersion(item)"
		   >
		     <text>PDF下载</text>
		   </view>
		   <!--<view class="custom-btn" style="background-color: #37C188;" @tap="loadTextVersion">-->
		   <!--<text>文字版</text>-->
		   <!--</view>-->
		 </view>
      </view>
	  
      <view
        class="d-flex flex-column"
        style="justify-content: space-around;margin-top:-35upx;margin-left: -70upx;"
      >
	    <!-- <text class="font-12" style="color: #333333;font-weight: bold;">
			中国房地产报
		</text> -->
	
        <text
          class="font-32"
          style="color: #444444;font-weight: bold;margin-top: 17upx;"
        >{{item.title}}</text>

		<text class="font-30" style="color: #333333;margin-top:17upx;margin-bottom: 8upx;">
			<view style="width:7upx;height:28upx;background-color:#1e8de1;float:left;margin-top:13upx;margin-right: 8upx;margin-left: 6upx;margin-bottom:0.5rem;"></view>重磅新闻
		</text>
		<!-- <v-html :nodes="item.description"></v-html> -->
		<!-- {{item.description}} -->
	
		<!-- <navigator class="bzlist" :href="url1" open-type="navigate"><strong style="color:#9c0000;font-size: 38upx;padding-right: 3upx;line-height: 35upx;">·</strong>{{texts1}}</navigator> -->
		<!-- <a class="bzlist" :href="url1"><strong style="color:#9c0000;font-size: 38upx;padding-right: 3upx;line-height: 35upx;">·</strong>{{texts1}}</a> -->
		<text class="bzlist" :data-title="texts1" :data-link="link1" v-bind:id="url1" @click="_gettUrl($event)"><strong style="color:#1e8de1;font-size: 45upx;padding-right: 3upx;line-height: 32upx;">·</strong>{{texts1}}</text>
		<text class="bzlist" :data-title="texts2" :data-link="link2" v-bind:id="url2" @click="_gettUrl($event)"><strong style="color:#1e8de1;font-size: 45upx;padding-right: 3upx;line-height: 32upx;">·</strong>{{texts2}}</text>
		<text class="bzlist" :data-title="texts3" :data-link="link3" v-bind:id="url3" @click="_gettUrl($event)"><strong style="color:#1e8de1;font-size: 45upx;padding-right: 3upx;line-height: 32upx;">·</strong>{{texts3}}</text>

		<!-- <text class="font-30" style="color:#ff2832;margin-top:20upx">
			￥10.00
		</text> -->
		<text class="font-24" style="color:#4b4b4b;margin-left: 4upx;margin-top:0.8rem;">
			{{item.dzbReleaseDate}}
		</text>
       <!-- <text
          class="font-24"
          style="color: #757575;"
        >{{item.dzbReleaseDate}}</text> -->
        
      </view>
    </view>
	<view class="newslist-box"  v-show="flag">
		<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
		<view class="newslist-top">
			<text class="newslist-top-back" @click="back()"><</text>
			<!-- <text class="newslist-top-title">报纸</text> -->
		</view>
		<view class="fm-bj" :style="{ background:'url('+ thumb +')'}"></view>
		<view class="fm-img" :style="{ background:'url(http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/24103547mn9b.jpg)'}"></view>
		<!-- <view class="fm-img" :style="{ background:'url(http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/19152807bw3p.jpg)'}"> -->
			<view style="color: #fff;position: absolute;top: 155upx;left:73upx;z-index: 999;font-size: 26upx;">地产首席财经融媒体</view>
			<view style="color: #fff;position: absolute;top: 425upx;left:375upx;z-index: 999;font-size:23upx">更新日期：{{datetime}}</view>
			<view style="color: #235a94;position: absolute;top: 470upx;left:375upx;background: #fff;padding: 0 0.4rem;z-index: 999;font-size:23upx">本期12版总{{title}}</view>
		</view>
		<!-- <view style="width: 100%;height: 380upx;background-size:100%;background-image: url(http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/02172055hp2c.jpg);"></view> -->
		
		<view  style="width: 100%;height:100%;color:#fff;padding-top:10upx">
			<p class="newslist-text" :data-link="listlink1" v-bind:id="listnews1" :data-title="listtext1" @click="_gettUrl($event)">
				<view>{{listtext1}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu1}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink2" v-bind:id="listnews2" :data-title="listtext2" @click="_gettUrl($event)">
				<view>{{listtext2}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu2}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink3" v-bind:id="listnews3" :data-title="listtext3" @click="_gettUrl($event)">
				<view>{{listtext3}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu3}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink4" v-bind:id="listnews4" :data-title="listtext4" @click="_gettUrl($event)">
				<view>{{listtext4}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu4}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink5" v-bind:id="listnews5" :data-title="listtext5" @click="_gettUrl($event)">
				<view>{{listtext5}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu5}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink6" v-bind:id="listnews6" :data-title="listtext6" @click="_gettUrl($event)">
				<view>{{listtext6}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu6}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink7" v-bind:id="listnews7" :data-title="listtext7" @click="_gettUrl($event)">
				<view>{{listtext7}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu7}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink8" v-bind:id="listnews8" :data-title="listtext8" @click="_gettUrl($event)">
				<view>{{listtext8}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu8}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink9" v-bind:id="listnews9" :data-title="listtext9" @click="_gettUrl($event)">
				<view>{{listtext9}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu9}}</view>
			</p>
			<p class="newslist-text" :data-link="listlink10" v-bind:id="listnews10" :data-title="listtext10" @click="_gettUrl($event)">
				<view>{{listtext10}}</view>
				<view style="color:#787878;font-size: 25upx;">{{miaoshu10}}</view>
			</p>
		</view>
	</view>
	 
	
  </view>
</template>

<script>
// import bzapi from '@/common/lib/common.js'
import api from '@/common/lib/request.js'
//#ifdef H5
// import $ from '@/common/lib/jquery.js'
//#endif

let iapChannel = null
// IAP producid
let productIds = ['creb1', 'creb2', 'creb3', 'creb4', 'creb5', 'creb13', 'creb22', 'creb38']

export default {
  data() {
    return {
      token: '',
      dataList: [],
	  flag:false,
	  showview:true
    }
  },
  onLoad() {
    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
  },
  computed: {
    isIOS() {
      return this.$store.getters.isIOS
    },
    // 是否显示苹果登录，iOS13以上的系统才有苹果登录功能
    isIAPPay() {
      // #ifdef APP-PLUS
      return this.isIOS
      // #endif
      return false
    },
  },
  onShow() {
    this.token = uni.getStorageSync('token');
    this.getData()
    // if (this.isIAPPay) {
    //   this.loadIAPChannels()
    // }
  },
  methods: {
    // iOS: load IAP channels
    loadIAPChannels() {
      console.log('loadIAPChannels...')
      let self = this
      plus.payment.getChannels(function (channels) {
        console.log('channels', JSON.stringify(channels))
        channels.forEach(c => {
          if (c.id === 'appleiap') {
            iapChannel = c
            self.requestOrder()
          }
        })
      }, function (e) {
        console.error(e)
        self.$hide()
      })
	  // 返回上一页面
	  window.location.reload();
	  uni.navigateBack();
    },
	//获取新闻列表
	_putNewsList(item){
		this.url1 = item.split(',')[0];
		this.link1 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.url1;
		this.texts1 = item.split(',')[1];
		
		this.url2 = item.split(',')[3];
		this.link2 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.url2;
		this.texts2 = item.split(',')[4];
		
		this.url3 = item.split(',')[6];
		this.link3 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.url3;
		this.texts3 = item.split(',')[7];
		
		this.url4 = item.split(',')[9];
		this.link4 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.url3;
		this.texts4 = item.split(',')[10];
		// uni.navigateTo({
		// 	url: 'http://localhost:8081/#/pages/index/news-detail/news-detail?id=162548&thumb=http%3A%2F%2Fcmszfb.oss-cn-beijing.aliyuncs.com%2Fu%2Fcms%2Fwww%2F202107%2F27130702e53p.png&title=%E5%B9%BF%E5%B7%9E%E5%9F%8E%E5%B8%82%E6%9B%B4%E6%96%B0%E5%B0%86%E7%AB%8B%E6%B3%95%EF%BC%9A%E2%80%9C%E9%92%89%E5%AD%90%E6%88%B7%E2%80%9D%E3%80%81%E7%9B%88%E4%BA%8F%E5%B9%B3%E8%A1%A1%E9%97%AE%E9%A2%98%E6%9C%89%E8%A7%A3%E4%BA%86&link=http%3A%2F%2Fwww.creb.com.cn%2Fmobile%2Fdynamic.jhtml%3Fid%3D162548'	
		// })
	},
	// 跳转地址
	_gettUrl(e){
		uni.navigateTo({
			// url: '/pages/index/news-detail/news-detail'
			url: '/pages/index/news-detail/news-detail?id=' + e.target.id + '&thumb=http%3A%2F%2Fcmszfb.oss-cn-beijing.aliyuncs.com%2Fu%2Fcms%2Fwww%2F202107%2F27155155txed.png&title='+ e.currentTarget.dataset.title +'&link=' + e.currentTarget.dataset.link
		})
	},
	_box_if(e){
		
		this.thumb = e.currentTarget.dataset.bmimg;
		this.res = e.currentTarget.dataset.res;
		this.datetime = e.currentTarget.dataset.datetime;
		this.title = e.currentTarget.dataset.title;
		this.listnews1 = this.res.split(',')[0];
		this.listlink1 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews1;
		this.listtext1 = this.res.split(',')[1];
		this.miaoshu1 = this.res.split(',')[2];
		
		this.listnews2 = this.res.split(',')[3];
		this.listlink2 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews2;
		this.listtext2 = this.res.split(',')[4];
		this.miaoshu2 = this.res.split(',')[5];
		
		this.listnews3 = this.res.split(',')[6];
		this.listlink3 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews3;
		this.listtext3 = this.res.split(',')[7];
		this.miaoshu3 = this.res.split(',')[8];
		
		this.listnews4 = this.res.split(',')[9];
		this.listlink4 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews4;
		this.listtext4 = this.res.split(',')[10];
		this.miaoshu4 = this.res.split(',')[11];
		
		this.listnews5 = this.res.split(',')[12];
		this.listlink5 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews5;
		this.listtext5 = this.res.split(',')[13];
		this.miaoshu5 = this.res.split(',')[14];
		
		this.listnews6 = this.res.split(',')[15];
		this.listlink6 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews6;
		this.listtext6 = this.res.split(',')[16];
		this.miaoshu6 = this.res.split(',')[17];
		
		this.listnews7 = this.res.split(',')[18];
		this.listlink7 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews7;
		this.listtext7 = this.res.split(',')[19];
		this.miaoshu7 = this.res.split(',')[20];
		
		this.listnews8 = this.res.split(',')[21];
		this.listlink8 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews8;
		this.listtext8 = this.res.split(',')[22];
		this.miaoshu8 = this.res.split(',')[23];
		
		this.listnews9 = this.res.split(',')[24];
		this.listlink9 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews9;
		this.listtext9 = this.res.split(',')[25];
		this.miaoshu9 = this.res.split(',')[26];
		
		this.listnews10 = this.res.split(',')[27];
		this.listlink10 = 'http://www.creb.com.cn/mobile/dynamic.jhtml?id=' + this.listnews10;
		this.listtext10 = this.res.split(',')[28];
		this.miaoshu10 = this.res.split(',')[29];
		
		this.showview = false;
		this.flag = !this.flag;
	},
	back(){
		this.flag = false;
		this.showview = true;
	},
    // IAP
    requestOrder() {
      this.$show('检测支付环境...')
      iapChannel.requestOrder(productIds, (orderList) => {
        console.log('requestOrder: ' + JSON.stringify(orderList))
        this.$hide()
      }, (e) => {
        console.error(e)
        this.$hide()
      })
    },
    // 获取电子报信息
    getData() {
      console.log('进入电子报')
      this.$show()
      api.request({
        url: '/dzb',
        data: {
          first: 0,
          token: this.token,
          count: 40
        }
      })
        .then(response => {
          this.$hide()
          this.dataList = response.contents
        })
        .catch(err => {
          console.log(err)
          this.$hide()
        })
    },
    // 电子版下载
    loadElectronicVersion(item) {
      console.log('loadElectronicVersion', item)
      // 未登录用户跳转登录页
      if (!this.token && !this.isIOS) {
        uni.navigateTo({ url: '/pages/mine/login/login' })
        return
      }
      // 已经购买直接下载
      if (item.isBuy == 1) {
        // 使用系统浏览器打开下载，文件管理由系统来负责
        // #ifdef APP-PLUS
        plus.runtime.openURL(item.attachHref)
        // #endif
      } else if (this.isIOS) {
        plus.runtime.openURL(item.attachHref)
      } else { // Android跳转到购买页
        uni.navigateTo({
          url: '/pages/specialPage/orderPayment/orderPayment?id=' + item.id + '&charge=' + item.contentCharge
        })
      }
    },
    onIapPay(item) {
      let self = this
      let productId = item.productId
      this.$show('正在支付，请稍后...')
      console.log('productId', productId)
      plus.payment.request(iapChannel, { "productid": productId }, function (result) {
        console.log('-> iap js call success', result)
        self.checkReceipt(item, result)
      }, function (e) {
        console.error('payment.request', e)
        self.$showToast('支付失败')
      })
    },
    // 通知后台IAP支付成功
    checkReceipt(item, iap) {
      console.log('checkReceipt', item, iap)
      this.$show('正在确认...')
      var url = `/content/payment/iap?contentId=${item.id}&token=${this.token}`
      console.log('request url', url)
      api.request({
        url: url,
        data: {
        }
      })
        .then(response => {
          console.log('支付成功', response)
          this.$showToast('支付成功', 'success')
          // 支付成功，重新加载列表信息
          this.getData()
        })
        .catch(err => {
          console.error('支付失败', err)
          this.$showToast('支付失败')
        })
    },
    // 文字版下载
    loadTextVersion() {
		
    }
	
	
  }
}
</script>

<style>
.single-pdf-edition {
  width: 100%;
  height: auto;
}
.zoom-img {
  padding: 35upx 43upx;
}
.custom-btn {
  width: 145upx;
  height: 50upx;
  line-height: 50upx;
  text-align: center;
  font-size: 24upx;
  margin-right: 50upx;
  color: white;
}
.bzlist{
	width:90%;
	color: #000;
	line-height: 35upx;
	text-decoration:none;
	margin-bottom: 5upx;
}
.stat{
		background-color: #fff;
		position: fixed;
		z-index: 9999;
		height: var(--status-bar-height);
		width: 100%;
		top: 0;
		left: 0;
}
.header{
		position: fixed;
		z-index: 9999;
		width: 100%;
		top: 0;
		left: 0;
		height: 80upx;
		background-color: #005bac;
		text-align: center;
		line-height: 80upx;
		color: #fff;
		font-size: 37upx;
		margin-top: var(--status-bar-height);
		/* background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/02134241gb38.jpg'); */
		background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/0311433500kq.jpg');
		/* box-shadow: 5upx 5upx 5upx #f5f5f5; */
		background-size:100%;
}
.newslist-box{
	background-color: #fff;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	/* padding-bottom: 4rem; */
}
.newslist-text{
	width: 90%;
	font-size:80upx;
	height: auto;
	color: #171813;
	line-height: 1upx!important;
	border-bottom: 1upx solid #f0f1ec;
	margin: 0 auto;
	padding: 20upx 0;
}
.newslist-text view{
	font-size: 32upx;
	line-height: 39upx;
}
.newslist-top{
	position: fixed;top: 42upx;left: 0;z-index: 99999;
	width: 100%;
	height: auto;
	line-height: 60upx;
	color:#fff;
	background-color:#005bac;
	background-image: url('http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202108/02134241gb38.jpg');
	background-size: 100%;
	/* background-color:#fff6e4;
	/* color:#000; */
}
.newslist-top-title{
	width: 76%;
	height: 80upx;
	display: block;
	float: left;
	text-align: center;
	line-height: 80upx;
	font-size: 40upx;
}
.newslist-top-back{
	width: 12%;
	/* float: left; */
	display: block;
	float: left;
	text-align: center;
	font-size: 40upx;
	line-height: 80upx;
	font-family: 黑体;
	/* font-weight: 700; */
}
.fm-img{width:100%; height: 430upx; background-size:cover!important;background-repeat: no-repeat!important;
	image-rendering: -moz-crisp-edges; /* Firefox */     
	image-rendering: -o-crisp-edges; /* Opera */      
	image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ 
	image-rendering: crisp-edges; 
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
.fm-bj{width: 29%;background-size:cover!important;height:295upx;top: 203upx;background-position-y: -05upx!important; position :absolute;background-repeat: no-repeat!important;left: 9.6%;margin-top: 7%;}

</style>